<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-父子组件通信案例</title>
</head>
<body>
    <div id="app">
        <cpn :number1="num1" :number2="num2"
             @num1change="num1change" @num2change="num2change"/>
    </div>
</body>
    <template id="cpn">
        <div>
            <h2>props:{{number1}}</h2>
            <h2>data:{{dnumber1}}</h2>
<!--            <input type="text" v-model="dnumber1"/>-->
            <input type="text" :value="dnumber1" @input="num1Input"/>
            <h2>props:{{number2}}</h2>
            <h2>data:{{dnumber2}}</h2>
<!--            <input type="text" v-model="dnumber2"/>-->
            <input type="text" :value="dnumber2" @input="num2Input"/>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const cpn = {
            template: '#cpn',
            props: {
                number1: Number,
                number2: Number,
            },
            data() {
                return {
                    dnumber1: this.number1,
                    dnumber2: this.number2
                }
            },
            methods: {
                num1Input(event) {
                    this.dnumber1 = event.target.value;
                    this.$emit('num1change', this.dnumber1);
                    this.dnumber2 = this.dnumber1*100;
                    this.$emit('num2change', this.dnumber2);
                },
                num2Input(event) {
                    this.dnumber2 = event.target.value;
                    this.$emit('num2change', this.dnumber2);
                    this.dnumber1 = this.dnumber2/100;
                    this.$emit('num1change', this.dnumber1);
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {
                num1: 1,
                num2: 0
            },
            components: {
                cpn
            },
            methods: {
                num1change(value) {
                    this.num1 = parseFloat(value);
                },
                num2change(value) {
                    this.num2 = parseFloat(value);
                }
            }
        })
    </script>
</html>